import { Avatar, Box, Button, Flex } from "@chakra-ui/react";
import React, { useContext, useMemo } from "react";
import { ConnectionSourceHandle, ConnectionTargetHandle } from "./Handle/ConnectionTargetHandle";
import { WorkflowContext } from "@/context/WorkflowContext";
import MyIcon from "@/components/common/Icon/MyIcon";
import { useDebug } from "@/components/hooks/useDebug";

type Props = {
  children?: React.ReactNode | React.ReactNode[] | string;
  minW?: string | number;
  maxW?: string | number;
  selected?: boolean;
  nodeId:any,
  menuForbid?: {
    debug?: boolean;
    rename?: boolean;
    copy?: boolean;
    delete?: boolean;
  };
};

const NodeCard = (props: any) => {
  console.log(props);
  const { children, avatar = "", minW = "300px", maxW = "600px",name,nodeId,position,debugResult,flowNodeType, menuForbid} = props;
  console.log('debugResult',debugResult)
  const {setHoverNodeId} =  useContext(WorkflowContext)
  
  const Header = useMemo(() => {
    return (
      <Box position={"relative"}>
          <MenuRender
            nodeId={nodeId}
            // pluginId={pluginId}
            flowNodeType={flowNodeType}
            menuForbid={menuForbid}
          />
        <NodeDebugResponse nodeId={nodeId} debugResult={debugResult} />
        <Box px={4} py={3}>
          <Flex alignItems={"center"}>
            <Avatar
              src={avatar}
              borderRadius={"0"}
              objectFit={"contain"}
              w={"30px"}
              h={"30px"}
            />
              <Box ml={3} fontSize={'md'} fontWeight={'medium'}>
                {name}{position.x}
              </Box>
          </Flex>
        </Box>
      
      </Box>
    );
  }, [position]);



  return (
    <Box
      minW={minW}
      maxW={maxW}
      bg={"white"}
      borderWidth={"1px"}
      borderRadius={"md"}
      boxShadow={"1"}
      _hover={{
        boxShadow: "4",
      }}
      onMouseEnter={() => setHoverNodeId(nodeId)}
      onMouseLeave={() => setHoverNodeId(undefined)}
    >
      {Header}
      {children}
      <ConnectionSourceHandle nodeId={nodeId} />
      <ConnectionTargetHandle nodeId={nodeId} />
    </Box>
  );
};

const MenuRender = React.memo(function MenuRender({
  nodeId,
  flowNodeType,
  menuForbid = {}
}:any){
  console.log('menuForbid',menuForbid)
  const { openDebugNode, DebugInputModal } = useDebug();
    
  const Render = useMemo(() => {

    const menuList = [
      ...(menuForbid?.debug
        ? []
        : [
            {
              icon: 'core/workflow/debug',
              label:'调试',
              variant: 'whiteBase',
              onClick: () => {
                console.log('openDebugNode:nodeId',nodeId)
                openDebugNode({entryNodeId:nodeId});
              }
            }
          ]),
      ...(menuForbid?.copy
        ? []
        : [
            {
              icon: 'copy',
              label: ('common.Copy'),
              variant: 'whiteBase',
            }
          ]),
      ...(menuForbid?.delete
        ? []
        : [
            {
              icon: 'delete',
              label: ('common.Delete'),
              variant: 'whiteDanger',
            }
          ])
    ];
    console.log('menuForbid',menuList)
    return (
      <>
        <Box
          className="nodrag controller-menu"
          // display={'none'}
          flexDirection={'column'}
          gap={10}
          position={'absolute'}
          top={'-20px'}
          right={0}
          transform={'translateX(90%)'}
          pl={'20px'}
          pr={'10px'}
          pb={'20px'}
          pt={'20px'}
        >
          {menuList.map((item) => (
            <Box key={item.icon}>
              <Button
                size={'xs'}
                variant={item.variant}
                leftIcon={<MyIcon name={item.icon as any} w={'13px'} />}
                onClick={item.onClick}
              >
                {item.label}
              </Button>
            </Box>
          ))}
        </Box>
        {/* <ConfirmDeleteModal />
        <DebugInputModal /> */}
        <DebugInputModal />
      </>
    );
  }, [
    DebugInputModal
  ]);

  return Render;
})

const NodeDebugResponse = React.memo(function NodeDebugResponse({
  nodeId,
  debugResult
}:any){
    const map = {
      running: {
        bg: 'primary.50',
        text: 'Running',
        icon: 'core/workflow/running'
      },
      success: {
        bg: 'green.50',
        text: ('core.workflow.Success'),
        icon: 'core/workflow/runSuccess'
      },
      failed: {
        bg: 'red.50',
        text: ('core.workflow.Failed'),
        icon: 'core/workflow/runError'
      },
      skipped: {
        bg: 'myGray.50',
        text: ('core.workflow.Skipped'),
        icon: 'core/workflow/runSkip'
      }
    };
    const statusData = map[debugResult?.status || 'running'];

  return  <Flex px={4} bg={statusData.bg} borderTopRadius={'md'} py={3}>
       <Box color={'myGray.900'} fontWeight={'bold'} flex={'1 0 0'}>
          {statusData.text}
        </Box>
    </Flex>;
})

export default React.memo(NodeCard);
